.msg-box {
    position: fixed !important;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 50px;
    padding: 10px 15px 10px 15px;
    background-color: #EDF2FC;
    color: #909399;
    box-sizing: border-box;
    opacity: 0;
    transition: all 0.5s;
}

.msg-box.show {
    animation: alphas 0.5s;
    opacity: 1;
}

@keyframes alphas {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.msg-box.normal {
    background-color: #FFB6C160;
    color: deeppink;
}

.msg-box.success {
    background-color: #F0F9EB;
    color: #67C23A;
}

.msg-box.warning {
    background-color: #FDF6EC;
    color: #E6A23C;
}

.msg-box.error {
    background-color: #FEF0F0;
    color: #F56C6C;
}

.msg-box .msg-icon {
    position: absolute !important;
    top: 50%;
    left: 10px;
    width: 18px;
    height: 18px;
    margin-top: -7.5px;
}

.msg-box .msg-tip {
    width: 100%;
    font-size: 14px;
    line-height: 33px;
    /*margin-left: 23px;*/
}